<template>
  <view class="my-coupon" :style="{ '--themeColor': themeColor }">
    <nav-bar title="失效的券" />
    <view class="list">
      <mescroll-uni
        :fixed="false"
        ref="mescrollRef"
        @down="downCallback"
        @up="upCallback"
        :up="{
          textNoMore: '没有更多了',
          empty: {
            tip: '暂无相关数据',
            icon: 'https://hyyxboss.oss-cn-shenzhen.aliyuncs.com//img/pub/no_data.png',
            fixed: true,
            top: '40%',
          },
        }"
      >
        <view class="list-item-container">
          <view class="list-item" v-for="(dItem, index) in list" :key="index">
            <view class="coupon-bg">
              <xh-img src="/wxapp/static/coupon/invalid-bac_two.png" />
            </view>
            <view class="item-container">
              <view class="item-lf">
                <view class="_h2">
                  {{ dItem.customerCoupon.couponName }}
                  <label class="sub-lable-style" v-if="dItem.expireTag">
                    {{ dItem.expireTag }}
                  </label>
                </view>
                <view class="item-lf-bottom">
                  <view class="_h3">
                    有效期至{{ dItem.customerCoupon.expireTime }}，{{
                      dItem.description
                    }}
                  </view>
                </view>
              </view>
              <view class="item-rt">
                <view class="_h5">立即使用</view>
              </view>
              <view class="show-balance-discount">
                <view
                  v-if="dItem.customerCoupon.couponType === 'CASH'"
                  class="_h4"
                >
                  {{ dItem.customerCoupon.reduceCost / 100 }}
                  <label
                    class="_lable coupon-lable-tag"
                    :style="{ fontSize: '29rpx' }"
                  >
                    元
                  </label>
                </view>
                <view
                  v-if="dItem.customerCoupon.couponType === 'DISCOUNT'"
                  class="_h4"
                >
                  {{ dItem.customerCoupon.discount / 10 }}
                  <label
                    class="_lable coupon-lable-tag"
                    :style="{ fontSize: '29rpx' }"
                  >
                    折
                  </label>
                </view>
                <view
                  v-if="dItem.customerCoupon.couponType === 'GENERAL'"
                  class="_h4"
                ></view>
              </view>
            </view>
            <view class="invalid-icon" v-if="dItem.customerCoupon.status === 2">
              <xh-img src="/wxapp/static/couponModal/coupon-already-use.png" />
            </view>
            <view class="invalid-icon" v-if="dItem.customerCoupon.status === 3">
              <xh-img src="/wxapp/static/couponModal/coupon-isValid.png" />
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import couponContent from "@/components/pageComponents/sp-coupon/coupon-content/index.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { getMyCoupon } from "@/service/api/sp-coupon/index";
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    couponContent,
  },
  data() {
    return {
      aciveTab: 1,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 2,
      },
      location: {
        longitude: "",
        latitude: "",
      },
    };
  },
  created() {
    this.$getUserLocation().then((res) => {
      let result = res?.currentLocation ? res?.currentLocation : res?.location;
      let { longitude, latitude } = result;
      this.location = {
        longitude,
        latitude,
      };
    });
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  methods: {
    changeTab(val) {
      if (val == this.aciveTab) return;
      this.aciveTab = val;
      this.queryParams.status = val;
      this.mescroll.resetUpScroll();
    },
    downCallback(page) {
      this.queryParams.pageNum = 1;
      this.getCouponList();
    },
    upCallback(page) {
      this.queryParams.pageNum = page.num;
      this.getCouponList();
    },
    getCouponList() {
      let {
        queryParams,
        queryParams: { pageNum },
      } = this;
      getMyCoupon(queryParams).then((res) => {
        let { total, list = [] } = res;
        this.list = pageNum == 1 ? list : this.list.concat(list);
        setTimeout(() => {
          this.mescroll.endBySize(list.length || 0, total);
        }, 1500);
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f7f7f7;
  width: 100%;
  height: 100vh;
}
</style>
<style lang="scss" scoped>
.my-coupon {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .list {
    padding: 0 20rpx;
    flex: 1;
    overflow-y: scroll;

    /*list-item*/
    .list-item-container {
      padding-top: 41rpx;
      background: #f6f6f6;
    }
    .list-item {
      position: relative;
      margin-bottom: 26rpx;

      .item-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        align-items: flex-start;
        display: flex;
        justify-content: space-between;

        .item-lf {
          margin-top: 32rpx;
          margin-left: 36rpx;

          ._h2 {
            font-size: 32rpx;
            font-weight: bold;
            color: #cccccc;
            /*.sub-lable-style{*/
            /*font-size:24rpx;*/
            /*font-weight:400;*/
            /*color:rgba(230,67,64,1);*/
            /*}*/
          }

          .item-lf-bottom {
            margin-top: 23rpx;

            ._h3 {
              max-width: 303rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: #dbdada;
              line-height: 29rpx;
            }
          }
        }

        .item-rt {
          width: 126rpx;
          height: 200rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          ._h5 {
            width: 29rpx;
            font-size: 29rpx;
            font-weight: bold;
            color: #ffffff;
            line-height: 40rpx;
          }
        }
      }

      /*卡券背景图*/

      .coupon-bg {
        width: 100%;
        height: 200rpx;
      }

      /*金额和折扣的显示浮动*/

      .show-balance-discount {
        width: 200rpx;
        position: absolute;
        top: 94rpx;
        right: 130rpx;

        ._h4 {
          text-align: center;
          font-size: 48rpx;
          font-weight: 500;
          color: #cccccc;
        }

        .coupon-lable-tag {
          margin-left: -5rpx;
        }
      }

      /*invalid-icon*/

      .invalid-icon {
        position: absolute;
        top: 7rpx;
        right: 150rpx;
        width: 119rpx;
        height: 119rpx;
      }
    }
  }
}
</style>
